<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/main.css">

</head>
<body>
<!--  导航  -->
<div id="content">
<!-- 头部 -->
    <div class="head">
        <div class="head_center">
            <div class="title">我的第一个网站</div>
            <ul class="menu">
                <li class="li1"><a href="#">首页</a></li>
                <li class="li1"><a href="#">案例</a></li>
                <li class="li1"><a href="#">服务</a></li>
                <li class="li1"><a href="#">动态</a></li>
                <li class="li1"><a href="#">关于</a></li>
            </ul>
        </div>
    </div>
<!-- 中间部分 -->
    <div class="middle">
        <!-- 轮播图   -->
        <div class="picture" id="lunbo">
            <!--  箭头的展示   -->
            <a href="#" class="left_a" id="left">&lt;</a>
            <a href="#" class="right_a" id="right">&gt;</a>
            <!--  圆点的展示   -->
            <ul class="dots">
                <li class="li2"><a href="#"></a></li>
                <li class="li2"><a href="#"></a></li>
                <li class="li2"><a href="#"></a></li>
                <li class="li2"><a href="#"></a></li>
            </ul>
        </div>
            <!--  列表的展示  -->
        <div class="list">
            <p>下面是各种商品的展示</p>
            <ul class="list_li">
                <li class="li3" style="background-image: url('pic/p5.png')"><span>商品1</span></li>
                <li class="li3"  style="background-image: url('pic/p6.png')"><span>商品2</span></li>
                <li class="li3"  style="background-image: url('pic/p7.png')"><span>商品3</span></li>
                <li class="li3"  style="background-image: url('pic/p8.png')"><span>商品4</span></li>
                <li class="li3"  style="background-image: url('pic/p9.png')"><span>商品5</span></li>
                <li class="li3"  style="background-image: url('pic/p10.png')"><span>商品6</span></li>
                <li class="li3"  style="background-image: url('pic/p11.png')"><span>商品7</span></li>
                <li class="li3"  style="background-image: url('pic/p12.png')"><span>商品8</span></li>
            </ul>
        </div>
    </div>
<!-- 尾部1 -->
<!--    <div class="foot">-->
<!--        <div class="foot_1">个人制作尊重版权</div>-->
<!--        <ul class="foot_2">-->
<!--            <li class="li4"><p>首页</p></li>-->
<!--            <li class="li4"><p>首页</p></li>-->
<!--            <li class="li4"><p>首页</p></li>-->
<!--            <li class="li4"><p>首页</p></li>-->
<!--            <li class="li4"><p>首页</p></li>-->
<!--        </ul>-->
<!--    </div>-->


    <!-- 尾部2 -->
    <div class="foot">
        <p class="foot_p1">ADVERTISING DESIGN</p>
        <p class="foot_p2">
            <span>©2023 版权所有</span>
            <span>首页 | 关于 | 案例 | 服务 | 动态</span>
        </p>
    </div>
</div>
</body>
<script type="text/javascript" src="js/main.js"></script>
</html>